<template>
  <div class="pro-list-root">
    <lark-drawer border title="实验室资质和专家" title-height="40px" width="420px" height="max-content" direction="right">
      <div class="l-p-body l-p-lab" v-if="showType === 1" v-loading="loading">
        <div class="l-p-i-item" v-for="item in labImages">
          <img :src="item" @click="bigPic(item)"/>
        </div>
      </div>
      <div class="l-p-body l-p-pro" v-else>
        <expert-detail :expert-id="proId"></expert-detail>
      </div>
    </lark-drawer>
  </div>
</template>

<script>
  import { reactive, toRefs, onMounted, ref, computed, watch } from '@vue/composition-api'
  import { Message, MessageBox } from 'element-ui'
  import store from '@/store'
  import router from '@/router'
  import { getLabImage } from '@/api/industry/lab'
  import { getPicUrl } from '@/api/industry/file'
  import { larkViewer } from 'lark-common'
  import expertDetail from '@/components/ServiceComponents/expertDetail'

  export default {
    name: 'index',
    props: {
      showType: {
        type: [Number, String],
        default: 1
      },
      labId: {
        type: [String, Number],
        default: 1
      },
      proId: {
        type: [String, Number],
        default: null
      }
    },
    components: {
      expertDetail
    },
    setup(props, content) {

      let { labId, showType } = props

      const data = reactive({
        labImages: [],
        loading: false
      })

      const getLabImg = () => {
        let { labId, showType } = props
        if (showType !== 1) return
        data.loading = true
        getLabImage(labId).then(res => {
          data.labImages = res.data.map(item => `${getPicUrl}/${item}`)
          data.loading = false
        })
      }

      const bigPic = path => {
        larkViewer([{ src: path }])
      }

      watch(() => props.labId, (newVal, oldVal) => {
        if (newVal == null || newVal === oldVal) return
        getLabImg()
      })

      if (labId != null && showType === 1) {
        getLabImg()
      }

      return { ...toRefs(data), bigPic }
    }
  }
</script>

<style scoped lang="scss">
  $full: 100%;
  .pro-list-root {
    position: absolute;
    right: 0;
    top: 120px;

    .lark-drawer-root {
      position: relative;
      top: 5%;


      .l-p-body {
        position: relative;
        padding: 10px 10px 0 10px;
        height: 42vh;

        &.l-p-lab {
          padding: 20px;
          display: flex;
          flex-direction: row;
          justify-content: flex-start;
          flex-wrap: wrap;

          .l-p-i-item {
            margin-left: 2%;
            margin-top: 2%;
            flex-basis: 31%;
            height: 46%;

            img {
              width: 100%;
              height: 100%;
            }
          }
        }

      }

    }
  }
</style>
